<html>
<head>
    <title>双预防系统</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        body {
            background: #ffffff;
        }

        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer {
            height: 200px;
        }

        .inputW {
            width: 150px;
        }

        .itemW {
            width: 200px;
        }

        .formLabelWidth {
            width: 100px;
        }
    </style>
</head>
<body>
<div class="page" id="page-monitor">
    <div class="page-main">
        <el-dialog
                title="定位查询"
                fullscreen="true"
                :visible.sync="innerVisible"
                :before-close="mapClose" style="display: none">
            <div style="width:730px;margin:auto;font-size: 15px">
                要查询的地址：<input class="mapInput" id="text_" type="text"/>
                <input type="button" class="mapInput" value="查询" @click="searchByStationName()"/>
                查询结果(经纬度)：<input class="mapInput" id="result_" type="text"/>
                <input type="button" class="mapInput" value="确定" @click="innerVisible=false"/>
                <div id="container"
                     style="position: absolute;
            width: 730px;
            height: 590px;
            border: 1px solid gray;
            overflow:scroll;">
                </div>
            </div>
        </el-dialog>
        <el-form :model="addForm" ref="addForm">
            <el-row>
                <p style="color: #409EFF;margin-left: 2%;margin-bottom: 20px">企业基本信息

                        <el-button type="success" @click="saveClick" style="float: right">保存</el-button>

                </p>
                <el-col :span="12" >
                    <el-form-item label="企业名称" prop="projectName" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'企业名称不能为空!',trigger:'blur'}
                            ]">
                        <el-input v-model="addForm.projectName" autocomplete="off" ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="社会信用代码" prop="socialID" :label-width="formLabelWidth" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'社会信用代码不能为空!',trigger:'blur'}]">
                        <el-input v-model="addForm.socialID" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="法人代表:" prop="legalMan" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'法人代表不能为空!',trigger:'blur'}]">
                        <el-input v-model="addForm.legalMan" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="法人电话:" prop="legalPhone" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'法人电话不能为空!',trigger:'blur'}]">
                        <el-input v-model="addForm.legalPhone" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="用户联系人:" prop="manager" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'用户联系人不能为空!',trigger:'blur'}]">
                        <el-input v-model="addForm.manager" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系电话:" prop="phone" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'联系电话不能为空!',trigger:'blur'}]">
                        <el-input v-model="addForm.phone" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="所在地:" :label-width="formLabelWidth">
                        <el-col :span="8">
                            <el-select v-model="addForm.province" @change="provinceChange">
                                <el-option
                                        v-for="item in provinceArr"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.name"
                                >
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="8">
                            <el-select v-model="addForm.city" @change="cityChange">
                                <el-option
                                        v-for="item in cityArr"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.name"
                                >
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="8">
                            <el-select v-model="addForm.zone" @change="zoneChange">
                                <el-option
                                        v-for="item in zoneArr"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.name"
                                >
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="详细地址:" prop="address" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'详细地址不能为空!',trigger:'blur'}
                            ]">
                        <el-input v-model="addForm.address" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="经度:" prop="lng" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'经度不能为空!',trigger:'blur'}
                            ]">
                        <el-input v-model="addForm.lng" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="纬度:" prop="lat" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'纬度不能为空!',trigger:'blur'}
                            ]">
                        <el-input v-model="addForm.lat" autocomplete="off"></el-input>

                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="所属行业" prop="catigory" :label-width="formLabelWidth" :rules="[
                       {required:true,message:'所属行业不能为空!',trigger:'blur'}
                       ]">
                        <el-select v-model="addForm.catigory" filterable placeholder="请选择或搜索行业" style="width: 100%;">
                            <el-option
                                    v-for="item in businessArr"
                                    :key="item.cid"
                                    :label="item.cname"
                                    :value="item.cid">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-button style="float: right" type="primary" @click="getPosition()">定位</el-button>
                </el-col>
            </el-row>


        </el-form>

    </div>
</div>
<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=GSkyZRDlTKcIqzerwITZvxee"></script>
<script>
    let vuePage = new Vue({
        el: '#page-monitor',
        data: {
            dialogFormVisible: false,
            formLabelWidth: '120px',
            provinceArr:[],
            innerVisible:false,
            addForm:{},
            provinceArr:[],
            cityArr:[],
            zoneArr:[],
            businessArr:[],
        },
        created: function () {
            $('.page').show();
            this.loadData();
            HttpUtil.get('Zone/Child', {parentName: '中国', level: 'province'}).success((res) => {
                this.provinceArr = res.data;
            })
        },
        methods: {
            loadData: function () {
                HttpUtil.get('project/list', {projectNo: SiteConfig.account.projectNo}).success((res) => {
                     if (res.state==0) {
                         this.addForm = res.data[0];
                     }
                })
            },
            getPosition() {
                if (!(this.addForm.province && this.addForm.city && this.addForm.zone && this.addForm.address)){
                    this.$message({
                        type:'warning',
                        message:'地址信息不完善'
                    })
                    return;
                }
                this.innerVisible = true;
                setTimeout(() => {
                    let adrr = this.addForm.province + this.addForm.city + this.addForm.zone + this.addForm.address;
                    document.getElementById("text_").value = adrr ? adrr : '';
                    this.getMap();
                }, 1);

            },
            mapClose(done) {
                document.getElementById("text_").value = '';
                document.getElementById("result_").value = '';
                done();
            },
            getMap() {
                let map = new BMap.Map("container");
                map.centerAndZoom("杭州", 12);
                map.enableScrollWheelZoom();    //启用滚轮放大缩小，默认禁用
                map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
                map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
                map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
                map.addControl(new BMap.OverviewMapControl({isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));   //右下角，打开
                this.localSearch = new BMap.LocalSearch(map);
                this.mapView = map;
                this.searchByStationName();
            },
            searchByStationName() {
                this.mapView.clearOverlays();//清空原来的标注
                let keyword = document.getElementById("text_").value;
                this.localSearch.setSearchCompleteCallback((searchResult) => {
                    let poi = searchResult.getPoi(0);
                    document.getElementById("result_").value = poi.point.lng + "," + poi.point.lat;
                    this.mapView.centerAndZoom(poi.point, 13);
                    let marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat));  // 创建标注，为要查询的地方对应的经纬度

                    let self = this;
                    marker.addEventListener("dragend", function (e) {
                        self.addForm.lng = marker.getPosition().lng;
                        self.addForm.lat = marker.getPosition().lat;
                        document.getElementById("result_").value = marker.getPosition().lng + "," + marker.getPosition().lat;
                    })

                    marker.addEventListener("click", function () {
                        let content = document.getElementById("text_").value + "<br/><br/>经度：" + marker.getPosition().lng + "<br/>纬度：" + marker.getPosition().lat;
                        let infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");
                        this.openInfoWindow(infoWindow);

                    });
                    this.mapView.addOverlay(marker);
                    marker.enableDragging();
                    marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
                    this.addForm.lng = marker.getPosition().lng;
                    this.addForm.lat = marker.getPosition().lat;
                });
                this.localSearch.search(keyword);
            },
            provinceChange(value) {
                HttpUtil.get('Zone/Child', {parentName: value, level: 'city'}).success((res) => {
                    this.cityArr = res.data;
                })
            },
            cityChange(value) {
                HttpUtil.get('Zone/Child', {parentName: value, level: 'district'}).success((res) => {
                    this.zoneArr = res.data;
                })
            },
            zoneChange(val){

            },
            saveClick(){
                this.$refs['addForm'].validate((valid)=>{
                    if (valid){
                        if (!(this.addForm.province && this.addForm.city && this.addForm.zone)) {
                            this.$message({
                                type:'warning',
                                message:'省市区信息不完善'
                            })
                        }
                        HttpUtil.get('Project/Update', this.addForm).success((res) => {
                            if (res.state==0){
                                this.$message.success('保存成功');
                                this.addForm = {};
                                this.loadData();
                            }else {
                                this.$message({
                                    type:'error',
                                    message:res.errMsg
                                })
                            }

                        });
                    }
                })
            }
        },

        mounted: function () {
            HttpUtil.get('CodeController/BusinessList', {pageno: 1, pagesize: 200}).success((res) => {
                this.businessArr = res.data;
            });
        }
    });
</script>
</body>
</html>
